<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<button class="add-button" @click="showCreatePopup=true">从空白创建</button>
		</view>
		<view>打卡接龙介绍</view>
		<!-- 卡片列表 -->
		<!-- <view class="card-list">
			<view v-for="(item, index) in cards" :key="index" class="card" @click="onClickTemplate">
				<image :src="item.image" class="card-image" mode="aspectFill"></image>
				<text class="card-text">{{ item.text }}</text>
			</view>
		</view> -->
		<u-popup v-model="showCreatePopup" :closeable="false" border-radius="20" mode="bottom">
			<view class="popup-view f-col r-center">
				<text class="popup-title">请选择</text>
				<view class="popup-list f-col r-center">
					<view class="popup-item f-col c-center" v-for="(item,index) in createAry" :key="index"
						@click="onClickCreate(index)">
						<text>{{item.title}}</text>
						<text>{{item.label}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cards: [{
						image: '/static/daily-sign.png',
						text: '每日打卡/签到'
					},
					{
						image: '/static/group-sign.png',
						text: '群打卡接龙'
					},
					{
						image: '/static/study.png',
						text: '全民学习计划'
					},
					{
						image: '/static/exercise.png',
						text: '每日运动打卡'
					},
					{
						image: '/static/safety.png',
						text: '每日安全打卡'
					},
					{
						image: '/static/poetry.png',
						text: '诗词阅读打卡'
					},
					{
						image: '/static/home-safety.png',
						text: '到家安全打卡'
					},
					{
						image: '/static/more.png',
						text: '更多活动'
					},
				],
				showCreatePopup: false,
				createAry: [{
						title: "一次性收集",
						label: "只需要收集一次信息，不需要反复收集"
					},
					{
						title: "每天",
						label: "每日每天打卡x次"
					},
					{
						title: "法定工作日",
						label: "只在法定工作日打卡x次，节假日不打卡"
					},
					{
						title: "自定义日期打卡",
						label: "最多可自定义1年的打卡日期，适合打卡日期不规律的场景"
					},
				]
			};
		},
		onLoad() {
			console.log('进入打卡页');
		},
		methods: {
			onClickTemplate() {
				uni.navigateTo({
					url: "/myPage/sign/signTemplate"
				})
			},
			onClickCreate(idx) {
				uni.navigateTo({
					url: "/myPage/sign/signInCreate?selectIdx=" + idx
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/css/app.scss";

	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	/* 头部样式 */
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}


	.add-button {
		background: linear-gradient(45deg, #ff7e5f, #feb47b);
		color: #fff;
		padding: 15rpx 100rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
		border: none;
		transition: all 0.3s ease;
	}

	.add-button:hover {
		transform: scale(1.05);
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.25);
	}

	/* 卡片列表样式 */
	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 单个卡片样式 */
	.card {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
	}

	.card-image {
		width: 100%;
		height: 180rpx;
		object-fit: cover;
	}

	.card-text {
		font-size: 28rpx;
		text-align: center;
		padding: 15rpx 0;
		color: #555;
	}
</style>